<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<base href="${pageContext.request.scheme }://${pageContext.request.serverName}:
${pageContext.request.serverPort}${pageContext.request.contextPath}/"/>
<html>
<head>
<meta charset="UTF-8">
<title>会员注册页面</title>
	<script src="js/jquery-1.7.2.js"></script>
	<script>

		$(function () {
			$("#username").focus(function () {
				$("#msg").html("请输入用户名！").css("color","blue");
			})


		$("#username").blur(function () {
			$.post("UserServlet?way=checkUser",{"username":$(this).val()},function (result) {
				if(result){
					//为true,有同名的，不能注册，提示用户已经存在
					$("#msg").html("用户名已存在，请重新输入！").css("color","red");
				}else{
					if($(this).val()!=null){
						$("#msg").html("用户名可用！").css("color","green");
					}

				}
			},"json");
		})
	})
	</script>


<link type="text/css" rel="stylesheet" href="static/css/style.css" >
<style type="text/css">
	.login_form{
		height:420px;
		margin-top: 25px;
	}

</style>
<script type="text/javascript">
	function showMsg(ele,msg,col,inputFlag){
		ele.innerHTML=msg;
		ele.style.color=col;
		ele.flag=inputFlag;
	}
	window.onload=function(){
		//文本框
		var username=document.getElementById("username");
		var password=document.getElementById("password");
		var repwd=document.getElementById("repwd");
		var email=document.getElementById("email");
		//显示提示信息的元素
		var unameMsg=document.getElementById("unameMsg");
		var pwdMsg=document.getElementById("pwdMsg");
		var repwdMsg=document.getElementById("repwdMsg");
		var emailMsg=document.getElementById("emailMsg");
		var sub_btn=document.getElementById("sub_btn");
		//给元素设置属性flag,默认为false，都为true的话说明表单可以提交
		unameMsg.flag=false;
		pwdMsg.flag=false;
		repwdMsg.flag=false;
		emailMsg.flag=false;

		username.onfocus=function(){
			showMsg(unameMsg,"用户名为3-16为的字母数字下划线组成","blue");
		}
		var unameReg=/^[0-9a-zA-Z_]{3,16}$/;
		username.onblur=function(){
			if(username.value==""){
				showMsg(unameMsg,"用户名为不能为空","red",false);
			}else if(!unameReg.test(username.value)){
				 showMsg(unameMsg,"用户名格式不正确","red",false);
			}else{
				showMsg(unameMsg,"√","blue",true);
				unameFlag=true;
			}
		}


		password.onfocus=function(){
			showMsg(pwdMsg,"密码为6-18为的字母数字下划线组成","blue");
		}
		var pwdReg=/^[0-9a-zA-Z_]{6,18}$/;
		password.onblur=function(){
			if(repwd.value!=password.value){
				 showMsg(repwdMsg,"两次密码输入不一致","red",false);
			}
			var pwdStr=password.value;
			if(password.value==""){
				showMsg(pwdMsg,"密码为不能为空","red",false);
			}else if(!pwdReg.test(pwdStr)){
				 showMsg(pwdMsg,"密码格式不正确","red",false);
			}else{
				showMsg(pwdMsg,"√","blue",true);
				pwdFlag=true;
			}
		}


		repwd.onfocus=function(){
			showMsg(repwdMsg,"请重复输入密码","blue");
		}
		repwd.onblur=function(){
			if(repwd.value==""){
				showMsg(repwdMsg,"请重复输入密码","red",false);
			}else if(repwd.value!=password.value){
				 showMsg(repwdMsg,"两次密码输入不一致","red",false);
			}else{
				showMsg(repwdMsg,"√","blue",true);
				repwdFlag=true;
			}
		}


		email.onfocus=function(){
			showMsg(emailMsg,"请输入邮箱","blue");
		}
		var emilReg=/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
		email.onblur=function(){
			if(email.value==""){
				showMsg(emailMsg,"邮箱不能为空","red",false);
			}else if(!emilReg.test(email.value)){
				 showMsg(emailMsg,"邮箱格式不正确","red",false);
			}else{
				showMsg(emailMsg,"√","blue",true);
				emailFlag=true;
			}
		}

		sub_btn.onclick=function(){
			if(unameMsg.flag==true&& pwdMsg.flag==true&&
				repwdMsg.flag==true&& emailMsg.flag==true){
				return true;
			}else{
				username.onblur();password.onblur();repwd.onblur();email.onblur();
				//alert("请完善注册信息");
				return false;
			}
		}

	}
</script>
</head>
<body>
		<div id="login_header">
		</div>

			<div class="login_banner">

				<div id="l_content">
					<span class="login_word">欢迎注册</span>
				</div>

				<div id="content">
					<div class="login_form">
						<div class="login_box" style="width: 800px;">
							<div class="tit">
								<h1>会员注册</h1>
								<a href="login.jsp" style="color: blue;">返回登录</a>
							</div>
							<span style="color: red">${sessionScope.errorMsg}</span>
							${pageContext.session.removeAttribute("errorMsg")}
							<div class="form">
								<form action="UserServlet" method="post">
									<input type="hidden" name="way" value="doRegist">
									<label>用户名称：</label>
									<input class="itxt" type="text" placeholder="请输入用户名"  autocomplete="off" tabindex="1"
										   name="username" value="${username}" id="username" />
									<span id="msg"></span>
									${pageContext.session.removeAttribute("username")}

									<span id="unameMsg"></span>
									<br />
									<br />
									<label>用户密码：</label>
									<input class="itxt" type="password" placeholder="请输入密码" autocomplete="off" tabindex="1"
										   name="password" value="" id="password" />
									<span id="pwdMsg"></span>
									<br />
									<br />
									<label>确认密码：</label>
									<input class="itxt" type="password" placeholder="确认密码" autocomplete="off" tabindex="1" name="repwd" id="repwd" />
									<span id="repwdMsg"></span>
									<br />
									<br />
									<label>电子邮件：</label>
									<input class="itxt" type="text" placeholder="请输入邮箱地址" autocomplete="off" tabindex="1"
										   name="email" value="${email}" id="email" />
									${pageContext.session.removeAttribute("email")}

									<span id="emailMsg"></span>
									<br />
									<br />
									<input type="submit" value="注册" id="sub_btn" />

								</form>
							</div>

						</div>
					</div>
				</div>
			</div>
		<div id="bottom">
			<span>
				会员注册.Copyright &copy;2015
			</span>
		</div>
</body>
</html>